<template>
	<view :class="isFixed?'bottom-container-fixed bottom-box-fixed':'bottom-container'">
		<!-- 底部组件、深浅2色系 -->
		<u-divider :color="bottomStyle.color" half-width="267" :border-color="bottomStyle.borderColor">技术支持</u-divider>
		<view class="bottom-company">
			<u-icon width="180" height="20" :name="bottomStyle.icon"></u-icon>
			<!-- #ifndef MP-WEIXIN -->
			<u-link :href="bottomStyle.url" :color="bottomStyle.companyColor">
				<!-- #endif -->
				<!-- <text>{{ bottomStyle.companyName }}</text> -->
				<!-- #ifndef MP-WEIXIN -->
			</u-link>
			<!-- #endif -->
		</view>
		<view class="bottom-phone" @tap="makePhoneCall"><text style="color: #397EFD;border-bottom: 1px solid #397EFD;">{{bottomStyle.phoneNumber}}</text></view>
	</view>
</template>

<script>
	export default {
		name: "cc-bottom",
		props: {
			//主题--参数可选white、black、custom，默认white，传入custom则使用customStyle传入的主题样式,webConfigure获取web端配置
			theme: {
				type: String,
				default: 'white'
			},
			//自定义底部样式
			customStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 是否固定底部
			isFixed: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				white: {
					color: '#919398', //技术支持字体颜色
					borderColor: '#DDDFE6', //分割线颜色
					companyColor: '#303133', //公司名称字体颜色
					phoneColor: '#303133', //电话号码字体颜色
					// icon: '/static/components/cc-bottom/logo-all.png', //公司logo
					url: '', //公司名称跳转链接
					phoneNumber: '' //电话号码
				},
				// black: {
				// 	color: '#7D7D7D',
				// 	borderColor: '#7D7D7D',
				// 	companyColor: '#DBDBDB',
				// 	phoneColor: '#CFCFD1',
					// icon: '/static/components/cc-bottom/black_logo.png',
				// 	url: '',
				// 	phoneNumber: ''
				// },
				bottomStyle: {}, //渲染底部样式
				phoneHeight: '', //屏幕高度
			};
		},
		mounted() {
			switch (this.theme) {
				case 'white':
					this.bottomStyle = this.white;
					break;
				case 'black':
					this.bottomStyle = this.black;
					break;
				case 'custom':
					this.bottomStyle = this.customStyle;
					break;
				case 'webConfigure':
					this.getBottom();
					break;
				default:
					this.bottomStyle = this.white;
			}
		},
		methods: {
			// 拨打电话
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.bottomStyle.phoneNumber
				});
			},
			// 获取底部技术支持配置信息
			getBottom() {
				this.$asynApi.getMobileConfig({}).then(res => {
					if (res.code == 200) {
						this.bottomStyle = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-container,
	.bottom-container-fixed {
		width: 100%;
		padding-bottom: 40rpx;

		.bottom-company {
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			font-weight: bold;
			color: #303133;
			// line-height: 37rpx;
			// margin: 10rpx 0 22rpx;
			display: flex;
			justify-content: center;

			text {
				margin-left: 8rpx;
			}
		}

		.bottom-phone {
			font-size: 24rpx;
			font-weight: 400;
			color: #94949E;
			line-height: 33rpx;
			text-align: center;
		}
	}

	.bottom-box-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
</style>
